import { Applet } from "@/api/interface/iot";
import { useAuthButtons } from "@/hooks/useAuthButtons";
import { AuthBtns } from "@/utils/constants";
import { PropType } from "vue";
import "./detail.scss";
import AppletConfig from "./public/appletConfig";
import AppletPort from "./public/appletPort";
import AppletService from "./public/appletService";

export default defineComponent({
	props: {
		detail: {
			type: Object as PropType<Applet.ResUserApplet>,
			default: () => {}
		}
	},
	emits: ["change", "refresh"],
	setup(props, {}) {
		const btnList = ref<any[]>([]);
		const readonly = ref(false);
		watch(
			() => props.detail.source,
			() => {
				if (props.detail.source == "develop") {
					useAuthButtons(AuthBtns.appletDevelop).then((res: any) => {
						btnList.value = res.filter((item: any) => item.btnGroup);
						readonly.value = btnList.value.find((item: any) => item.path == "mod") ? false : true;
					});
				} else {
					readonly.value = true;
				}
			},
			{ deep: true, immediate: true }
		);

		return () => {
			return (
				<div class="p-6 applet-config-page">
					{/* <Home
						detail={props.detail}
						onChange={() => emit("change")}
						onRefresh={() => emit("refresh")}
						readonly={readonly.value}
					/> */}
					<AppletConfig detail={props.detail} btns={btnList.value} />
					<AppletService detail={props.detail} btns={btnList.value} />
					<AppletPort detail={props.detail} btns={btnList.value} />
				</div>
			);
		};
	}
});

// const Home = defineComponent({
// 	props: {
// 		readonly: Boolean,
// 		detail: {
// 			type: Object as PropType<Applet.ResUserApplet>,
// 			default: () => {}
// 		}
// 	},
// 	emits: ["change", "refresh"],
// 	setup(props, { emit }) {
// 		const formEl = ref();
// 		const formRule = reactive({
// 			name: [{ required: true, message: "应用名称不能为空", trigger: "change" }]
// 		});

// 		const typeList = ref<Dict[]>([]);
// 		getDictList(DictType.AppletType).then(list => {
// 			typeList.value = list;
// 		});
// 		const changeBasic = () => {
// 			emit("change");
// 		};
// 		const publish = async () => {
// 			confirm({ content: "是否发布端应用" }).then(async (flag: any) => {
// 				if (!flag) {
// 					return;
// 				}
// 				const { code, message } = await marketPublish({ appId: props.detail.id });
// 				let ok = showTips(code, `发布`, message);
// 				if (ok) {
// 					emit("refresh");
// 				}
// 			});
// 		};
// 		const withdraw = async () => {
// 			confirm({ content: "是否下架端应用" }).then(async (flag: any) => {
// 				if (!flag) {
// 					return;
// 				}
// 				const { code, message } = await marketWithdraw({ appId: props.detail.id });
// 				let ok = showTips(code, `下架`, message);
// 				if (ok) {
// 					emit("refresh");
// 				}
// 			});
// 		};
// 		return () => {
// 			return (
// 				<>
// 					<div class="p-6 shadow" style="border: 1px solid #eee;">
// 						<div style="line-height:24px" class="flex justify-between">
// 							<div>
// 								<div class="title-left-line"></div>
// 								<span>应用主页</span>
// 							</div>
// 							<el-button onClick={changeBasic} type="primary" disabled={props.readonly}>
// 								保存
// 							</el-button>
// 						</div>
// 						<div class="flex content-center">
// 							<el-form
// 								disabled={props.readonly}
// 								class="pt-4 pl-4 pr-8 grid grid-cols-1 flex-1"
// 								model={props.detail}
// 								ref={formEl}
// 								rules={formRule}
// 								label-width="100px"
// 							>
// 								<el-form-item label="应用主页" prop="name">
// 									<div class="flex w-full">
// 										<div class="flex-1">
// 											<el-input v-model={props.detail.home} placeholder="http://127.0.0.1:8080/index.html" />
// 										</div>
// 										<div>
// 											{props.detail.marketPublish == "no" ? (
// 												<el-link
// 													type="primary"
// 													class="ml-4 iconfont iconbx-paper-plane"
// 													style="width:110px"
// 													onClick={publish}
// 													disabled={props.readonly}
// 												>
// 													发布为端应用
// 												</el-link>
// 											) : (
// 												<el-link
// 													type="danger"
// 													class="ml-4 iconfont iconbx-reset"
// 													style="width:120px"
// 													onClick={withdraw}
// 													disabled={props.readonly}
// 												>
// 													从应用市场撤销
// 												</el-link>
// 											)}
// 										</div>
// 									</div>
// 								</el-form-item>
// 								{/* <el-form-item>
// 									<el-alert title="您可以在这里配置应用的默认访问地址，配置完后实现一键直达访问。" type="info" show-icon />
// 								</el-form-item> */}
// 							</el-form>
// 						</div>
// 					</div>
// 				</>
// 			);
// 		};
// 	}
// });
